﻿<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  
  <link rel="stylesheet" href="style.css?v=1" type="text/css" media="screen">
  <script src="js/jstools.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/raphael.js" type="text/javascript" charset="utf-8"></script>
  
  <script src="js/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery/jquery.progressbar.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/jquery/jquery.asyncqueue.js" type="text/javascript" charset="utf-8"></script>
  
  <script src="js/Color.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/Polyline.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/ActivityImpl.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/ActivitiRest.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/LineBreakMeasurer.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/ProcessDiagramGenerator.js?v=2" type="text/javascript" charset="utf-8"></script>
  <script src="js/ProcessDiagramCanvas.js" type="text/javascript" charset="utf-8"></script>
  
  <style type="text/css" media="screen">
   
  </style>
  <style>
  body{transform: translateZ(0);}
   .svg-move{ user-select:none;cursor: move;}
  </style>
</head>
<body style="overflow:hidden">
<div class="wrapper">
<!--   <div id="pb1"></div> -->
<!--   <div id="overlayBox" > -->
<!--     <div id="diagramBreadCrumbs" class="diagramBreadCrumbs" onmousedown="return false" onselectstart="return false"></div> -->
    <div id="diagramHolder" class="diagramHolder"></div>
<!--     <div class="diagram-info" id="diagramInfo"></div> -->
  </div>
</div>
<script language='javascript'>
var DiagramGenerator = {};
var pb1;
$(document).ready(function(){
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    query_string[pair[0]] = pair[1];
  } 
  
  var processDefinitionId = query_string["processDefinitionId"];
  var processInstanceId = query_string["processInstanceId"];
  
  console.log("Initialize progress bar");
  
  pb1 = new $.ProgressBar({
    boundingBox: '#pb1',
    label: 'Progressbar!',
    on: {
      complete: function() {
        console.log("Progress Bar COMPLETE");
        this.set('label', 'complete!');
        if (processInstanceId) {
          ProcessDiagramGenerator.drawHighLights(processInstanceId);
        }
      },
      valueChange: function(e) {
        this.set('label', e.newVal + '%');
      }
    },
    value: 0
  });
  console.log("Progress bar inited");
  
  var scale=1;

  
  $(window).on("mousewheel",function(e){
	  var $svg = $("#diagramHolder svg");
	  if($svg.length){
		  var detail = e.originalEvent.wheelDelta;
		  if(detail>=0){
			  scale+=0.1;
			  if(scale>2){
				  scale = 2;
			  }
		  }else{
			  scale-=0.1;
			  if(scale<0.5){
				  scale = 0.5;
			  }
		  }
		  $svg.css("transform","scale("+scale+")");
	  }
  });
  
  var isDown = false, x1, y1, x=0, y=0,movex,movey;
   //拖动事件
    $(window).on("mousedown.relation", function (e) {
        isDown = true;
        x1 = e.pageX;
        y1 = e.pageY;
        
        $("body").addClass("svg-move");
        try{
        	  window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        }catch(e){
        	
        }
    })
    $(window).on("mousemove.relation", function (e) {
        if (isDown) {
        	  var $svg = $("#diagramHolder svg");
        	  if($svg.length){
        		  movex = x + e.pageX - x1;
        		  movey = y + e.pageY - y1;
        		
        		  $svg.css({
        			  "position": "absolute",
        			  "left":movex+'px',
        			  "top":movey+'px',
        			  "margin-top":0
        		  });
        		  
        		  
        	  }
          
        }
    }).on("mouseup", function () {
       
        if(isDown){
        	  x = movex;
              y = movey;
              isDown = false;
              $("body").removeClass("svg-move");
        }
      
    })
  
  ProcessDiagramGenerator.options = {
    diagramBreadCrumbsId: "diagramBreadCrumbs",
    diagramHolderId: "diagramHolder",
    diagramInfoId: "diagramInfo",
    on: {
      click: function(canvas, element, contextObject){
        var mouseEvent = this;
        console.log("[CLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);

        if (contextObject.getProperty("type") == "callActivity") {
          var processDefinitonKey = contextObject.getProperty("processDefinitonKey");
          var processDefinitons = contextObject.getProperty("processDefinitons");
          var processDefiniton = processDefinitons[0];
          console.log("Load callActivity '" + processDefiniton.processDefinitionKey + "', contextObject: ", contextObject);

          // Load processDefinition
        ProcessDiagramGenerator.drawDiagram(processDefiniton.processDefinitionId);
        }
      },
      rightClick: function(canvas, element, contextObject){
        var mouseEvent = this;
        console.log("[RIGHTCLICK] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
      },
      over: function(canvas, element, contextObject){
        var mouseEvent = this;
        //console.log("[OVER] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
        // TODO: show tooltip-window with contextObject info
        ProcessDiagramGenerator.showActivityInfo(contextObject);
      },
      out: function(canvas, element, contextObject){
        var mouseEvent = this;
        //console.log("[OUT] mouseEvent: %o, canvas: %o, clicked element: %o, contextObject: %o", mouseEvent, canvas, element, contextObject);
        ProcessDiagramGenerator.hideInfo();
      },
     
    },
    end:function(){
    	  var $svg = $("#diagramHolder svg");
    	  if($svg.length){
    		   var w = $svg.width();
    		   var h = $svg.height();
    		   var winW = $("body").width();
    		   var winH = $("body").height();
    		   var sx = winW/w;
    		   var sy = winH/h;
    		   scale = Math.min(sx,sy);
    		   if(scale<1){
    			   //复原svg 位置; 等同正常页面 top:0 left:0
    			   x = -(w - w*scale)/2;
    			   y = -(h- h*scale)/2;
    			   //svg 居中
    			   x += (winW - w*scale)/2;
    			   y += (winH - h*scale)/2;
    			   $svg.css({
    				   "transform":"scale("+scale+")",
    				   "position": "absolute",
         			  "left":x+'px',
         			  "top":y+'px',
         			 "visibility":"visible"
    			   }).show();
    		   }else{
    			   $svg.css(
    					   {
    						   "visibility":"visible"
    					   }
    					   );
    			   
    		   }
    		   
    		 
    	  }
    	
    }
  };
  
  var baseUrl = window.document.location.protocol + "//" + window.document.location.host + "/";
  var shortenedUrl = window.document.location.href.replace(baseUrl, "");
  baseUrl = baseUrl + shortenedUrl.substring(0, shortenedUrl.indexOf("/"));
  
  ActivitiRest.options = {
    processInstanceHighLightsUrl: baseUrl + "/service/process-instance/{processInstanceId}/highlights?callback=?",
    processDefinitionUrl: baseUrl + "/service/process-definition/{processDefinitionId}/diagram-layout?callback=?",
    processDefinitionByKeyUrl: baseUrl + "/service/process-definition/{processDefinitionKey}/diagram-layout?callback=?"
  };
  
  if (processDefinitionId) {
    ProcessDiagramGenerator.drawDiagram(processDefinitionId);
    
  } else {
    alert("processDefinitionId parameter is required");
  }
});


</script>
</body>
</html>
